<!--
 * @Author: your name
 * @Date: 2020-01-17 11:21:29
 * @LastEditTime : 2020-02-16 13:47:14
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /cross-bh5/vuepages/src/pages/memberStoredDataStatistics/introducePage.vue
 -->
<template>
  <div class="page-body introducePage">
    <div v-if="canOrder">
      <img
        :src="config.shopImgUrlPrefix + '2020/01/17/11/772401579231049.png'"
      />
      <div class="order1" @click="toOrder"></div>
      <div class="order2" @click="toOrder"></div>
      <div class="order3" @click="toOrder"></div>
      <div class="order4" @click="toOrder"></div>
    </div>
    <div v-else>
       <img
        :src="config.shopImgUrlPrefix + '2020/02/16/13/279011581832025.png'"
      />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge.js";
export default {
  name: "d",
  data() {
    return {
      config: config
    };
  },
  props:{
    canOrder: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    toOrder() {
      this.$router.push({
        path: "/mallList/serviceProductDetails",
        query: { machineType: 33, close: true }
      });
    },
    handleBack() {
      jsBridge.closeWindow();
    }
  },
  components: {
    customHeader
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/public";
.introducePage {
  position: relative;
  img {
    width: 100%;
  }
  .order1 {
    position: absolute;
    @include remCalc(top, 466);
    @include remCalc(left, 235);
    @include remCalc(width, 168);
    @include remCalc(height, 50);
    @include remCalc(padding, 50);
  }
  .order2 {
    position: absolute;
    @include remCalc(top, 760);
    @include remCalc(left, 8);
    @include remCalc(width, 168);
    @include remCalc(height, 50);
    @include remCalc(padding, 50);
  }
  .order3 {
    position: absolute;
    @include remCalc(top, 1060);
    @include remCalc(left, 258);
    @include remCalc(width, 168);
    @include remCalc(height, 50);
    @include remCalc(padding, 50);
  }
  .order4 {
    position: absolute;
    @include remCalc(top, 1495);
    @include remCalc(left, 31);
    @include remCalc(width, 168);
    @include remCalc(height, 50);
    @include remCalc(padding, 50);
  }
}
</style>
